<template>
  <div class="header">
    <div class="h-header" id="h-header">
      <div class="h-header-left">
        <router-link :to="{ path: '/index', query: { type: active } }">
          <img src="@/assets/img/logo-r.png" alt v-show="active == 0" />
          <img src="@/assets/img/logo-c.png" alt v-show="active == 1" />
        </router-link>
      </div>
      <div class="h-header-right" @click="show = true">
        <svg
          t="1577672840300"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1895"
          width="32"
          height="32"
        >
          <path
            d="M199.68 300.032m-49.152 0a4.8 4.8 0 1 0 98.304 0 4.8 4.8 0 1 0-98.304 0Z"
            p-id="1896"
            fill="#6d6d6d"
          />
          <path
            d="M402.432 343.04 829.44 343.04c23.552 0 44.032-19.456 44.032-44.032S852.992 256 829.44 256L402.432 256c-23.552 0-44.032 19.456-44.032 44.032S377.856 343.04 402.432 343.04z"
            p-id="1897"
            fill="#6d6d6d"
          />
          <path
            d="M199.68 512m-49.152 0a4.8 4.8 0 1 0 98.304 0 4.8 4.8 0 1 0-98.304 0Z"
            p-id="1898"
            fill="#6d6d6d"
          />
          <path
            d="M829.44 468.992 402.432 468.992c-23.552 0-44.032 19.456-44.032 44.032s19.456 44.032 44.032 44.032L829.44 557.056c23.552 0 44.032-19.456 44.032-44.032S852.992 468.992 829.44 468.992z"
            p-id="1899"
            fill="#6d6d6d"
          />
          <path
            d="M199.68 724.992m-49.152 0a4.8 4.8 0 1 0 98.304 0 4.8 4.8 0 1 0-98.304 0Z"
            p-id="1900"
            fill="#6d6d6d"
          />
          <path
            d="M829.44 680.96 402.432 680.96c-23.552 0-44.032 19.456-44.032 44.032s19.456 44.032 44.032 44.032L829.44 769.024c23.552 0 44.032-19.456 44.032-44.032S852.992 680.96 829.44 680.96z"
            p-id="1901"
            fill="#6d6d6d"
          />
        </svg>
      </div>
    </div>
    <popup v-model="show" position="right" style="background: #fff;">
      <div class="popup-content">
        <x-icon class="popup-close" type="ios-close-empty" size="40" @click.native="show = false"></x-icon>
        <div class="popup-header">
          <img class="popup-logo" src="@/assets/img/logo.png" alt />
        </div>
        <div class="popup-search">
          <input type="text" v-model="keywords" placeholder="关键词搜索" @keyup.enter="search" />
          <x-icon
            type="ios-search"
            size="20"
            style="fill:#494949;position:absolute;top:50%;right:0.18rem;margin-top: -10px;"
            @click.native="search"
          ></x-icon>
        </div>
        <div class="popup-column" v-show="active == 0">
          <div class="cell" @click="collapse_a = !collapse_a">
            关于我们
            <x-icon
              type="ios-arrow-down"
              size="15"
              :class="[collapse_a ? 'cell-icon-rotate' : '', 'cell-icon']"
            ></x-icon>
          </div>
          <div class="slide" :class="collapse_a?'animate':''">
            <router-link :to="{path:'/about-introduce', query:{type: active}}">公司介绍</router-link>
            <router-link :to="{path:'/about-course', query:{type: active}}">PERGO历程</router-link>
            <router-link :to="{path:'/about-global', query:{type: active}}">全球分布</router-link>
            <router-link :to="{path:'/about-store', query:{type: active}}">查找门店</router-link>
          </div>
          <div class="cell">
            <router-link :to="{path: '/news', query:{type: active}}">最新动态</router-link>
          </div>
          <div class="cell" @click="collapse_p = !collapse_p">
            产品中心
            <x-icon
              type="ios-arrow-down"
              size="15"
              :class="[collapse_p ? 'cell-icon-rotate' : '', 'cell-icon']"
            ></x-icon>
          </div>
          <div class="slide" :class="collapse_p?'animate':''">
            <router-link :to="{path:'/product', query:{type: active, productType: 0}}">强化复合地板</router-link>
            <router-link :to="{path:'/product', query:{type: active, productType: 1}}">实木复合地板</router-link>
            <router-link :to="{path:'/parts', query:{type: active}}">地板配件</router-link>
          </div>
          <div class="cell">
            <router-link :to="{path: '/case', query:{type: active}}">案例灵感</router-link>
          </div>
          <div class="cell">
            <router-link
              :to="{path:!getToken?'/dealer':'/login-success', query:{type: active}}"
            >经销商中心</router-link>
          </div>
          <div class="cell" @click="collapse_m = !collapse_m">
            更多
            <x-icon
              type="ios-arrow-down"
              size="15"
              :class="[collapse_m ? 'cell-icon-rotate' : '', 'cell-icon']"
            ></x-icon>
          </div>
          <div class="slide" :class="collapse_m?'animate':''">
            <router-link :to=" {path:'/Installation'}">安装</router-link>
            <router-link :to="{path:'/protection'}">环保认证</router-link>
            <router-link :to=" {path:'/clearning'}">清洁养护</router-link>
          </div>
        </div>
        <div class="popup-column" v-show="active == 1">
          <div class="cell">
            <router-link :to="{path: '/news', query:{type: active}}">最新动态</router-link>
          </div>
          <div class="cell">
            <router-link :to="{path: '/case', query:{type: active}}">案例灵感</router-link>
          </div>
          <div class="cell" @click="collapse_p = !collapse_p">
            产品中心
            <x-icon
              type="ios-arrow-down"
              size="15"
              :class="[collapse_p ? 'cell-icon-rotate' : '', 'cell-icon']"
            ></x-icon>
          </div>
          <div class="slide" :class="collapse_p?'animate':''">
            <router-link :to="{path:'/product', query:{type: active, productType: 0}}">强化复合地板</router-link>
            <router-link :to="{path:'/product', query:{type: active, productType: 1}}">实木复合地板</router-link>
            <router-link :to="{path:'/parts', query:{type: active}}">地板配件</router-link>
          </div>
          <div class="cell">
            <router-link :to="{path: '/login-success', query:{type: active}}">下载中心</router-link>
          </div>
          <div class="cell">
            <router-link :to="{path: '/reserve', query:{type: active}}">预定样品</router-link>
          </div>
          <div class="cell" @click="collapse_a = !collapse_a">
            关于我们
            <x-icon
              type="ios-arrow-down"
              size="15"
              :class="[collapse_a ? 'cell-icon-rotate' : '', 'cell-icon']"
            ></x-icon>
          </div>
          <div class="slide" :class="collapse_a?'animate':''">
            <router-link :to="{path:'/about-introduce', query:{type: active}}">公司介绍</router-link>
            <router-link :to="{path:'/about-course', query:{type: active}}">PERGO历程</router-link>
            <router-link :to="{path:'/about-global', query:{type: active}}">全球分布</router-link>
            <router-link :to="{path:'/about-store', query:{type: active}}">查找门店</router-link>
          </div>
        </div>
      </div>
      <div class="switch-type">
        切换至：
        <span @click="changeType">{{c_type}}</span>
      </div>
    </popup>
  </div>
</template>

<script>
import { Popup } from "vux";
export default {
  props: {
    active: {
      default: 0
    }
  },
  components: {
    Popup
  },
  data() {
    return {
      show: false,
      collapse_p: false,
      collapse_a: false,
      collapse_m: false,
      keywords: ""
    };
  },
  computed: {
    c_type() {
      return this.active == 0 ? "商用" : "零售";
    },
    getToken() {
      return localStorage.getItem("token") ? true : false;
    }
  },
  methods: {
    changeType() {
      let type = this.active == 0 ? 1 : 0;
      this.$emit("changeType", type);
      this.show = false;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.$router.push({
        path: "/index",
        query: {
          type: type
        }
      });
    },
    search() {
      this.$router.push({
        path: "/search",
        query: {
          keywords: this.keywords
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.cell {
  font-weight: bold;
  font-size: 0.28rem;
  padding: 10px 15px;
  position: relative;
  display: flex;
  align-items: center;

  .cell-icon {
    color: #656565;
    margin-left: 0.09rem;
    transition: All 0.4s ease-in-out;
  }

  .cell-icon-rotate {
    transform: rotate(180deg);
  }

  a {
    color: #000;
  }
}

.header {
  padding-bottom: 1.08rem;
}

.h-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.08rem;
  background: #fff;
  box-sizing: border-box;
  z-index: 9;
  transition: all 0.5s linear;

  .h-header-left {
    position: absolute;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);

    a {
      display: block;

      img {
        display: block;
        width: 2.8rem;
      }
    }
  }

  .h-header-title {
    margin: 0 auto;
    height: 1.08rem;
    width: 2.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .h-button-group {
      display: flex;
      margin-top: 0.27rem;
      border: 1px #000 solid;

      a {
        display: block;
        position: relative;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        width: 100%;
        height: 0.54rem;
        padding: 0;
        font-size: 0.28rem;
        line-height: 0.54rem;
        text-align: center;
        color: #999;
        white-space: nowrap;
        background: #fdfdfd;
        -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
      }

      a.h-button-group-current {
        background: #000;
        color: #fff;
      }
    }
  }

  .h-header-right {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    font-size: 0;
  }
}

.popup-content {
  position: relative;
  width: 4.25rem;
  padding: 0.27rem 0.36rem 0.32rem;
  background: #fff;
  box-sizing: border-box;

  .popup-logo {
    display: block;
    width: 1.44rem;
  }

  .popup-close {
    position: absolute;
    top: 0.1rem;
    right: 0.4rem;
  }

  .popup-search {
    position: relative;
    margin: 0.45rem 0;

    input {
      display: block;
      width: 100%;
      height: 0.61rem;
      border: 1px solid #e6e6e6;
      padding-left: 1em;
      box-sizing: border-box;
    }
  }
}

.switch-type {
  position: absolute;
  bottom: 0.9rem;
  left: 0.36rem;
  color: #979797;
  font-size: 0.25rem;

  span {
    display: inline-block;
    color: #fff;
    width: 0.9rem;
    height: 0.45rem;
    line-height: 0.45rem;
    text-align: center;
    background: #2e2e2e;
  }
}

.slide {
  padding: 0 15px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;

  a {
    display: block;
    margin: 0.1rem 0;
    color: #737373;
    font-size: 0.28rem;
  }
}

.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>
